<%--
  Created by IntelliJ IDEA.
  User: zzz
  Date: 2020/1/15
  Time: 19:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>家居家具管理系统</title>

    <!-- begin::global styles -->
    <link rel="stylesheet" href="${APP_PATH}/assets/vendors/bundle.css" type="text/css">
    <!-- end::global styles -->

    <!-- begin::dropzone -->
    <link rel="stylesheet" href="${APP_PATH}/assets/vendors/dropzone/dropzone.css" type="text/css">
    <!-- begin::dropzone -->

    <!-- begin::lightbox -->
    <link rel="stylesheet" href="${APP_PATH}/assets/vendors/lightbox/magnific-popup.css" type="text/css">
    <!-- end::lightbox -->

    <!-- begin::custom styles -->
    <link rel="stylesheet" href="${APP_PATH}/assets/css/app.css" type="text/css">
    <link rel="stylesheet" href="${APP_PATH}/assets/css/custom.css" type="text/css">
    <!-- end::custom styles -->

</head>
<body>

<!-- begin::page loader-->
<div class="page-loader">
    <div class="page-loader">
        <div class="spinner-border text-primary"></div>
        <span>加载中 ...</span>
    </div>
</div>
<!-- end::page loader -->

<!-- begin::navigation -->
<jsp:include page="/WEB-INF/jsps/Manager/common/navigation.jsp"/>
<!-- end::navigation -->

<!-- begin::top -->
<jsp:include page="/WEB-INF/jsps/Manager/common/top.jsp"/>
<!-- end::top -->

<!-- begin::main content -->
<main class="main-content">

    <div class="container-fluid">

        <!-- begin::page header -->
        <div class="page-header d-md-flex justify-content-between align-items-center">
            <h4>${requestScope.kinds.kname}</h4>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb m-t-0">
                    <li class="breadcrumb-item"><a href="${APP_PATH}/toManager">首页</a></li>
                    <li class="breadcrumb-item"><a href="${APP_PATH}/toMyGoods">我的商品</a></li>
                    <li class="breadcrumb-item active" aria-current="page">${requestScope.kinds.kname}</li>
                </ol>
            </nav>
        </div>
        <!-- end::page header -->

        <div class="card-group">
            <div class="card">
                <img src="${APP_PATH}/${requestScope.kinds.kface}" class="card-img-top" alt="...">
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <span style="margin-right : 20px;">商品种类</span>
                <button onclick="removeAll()" data-toggle="modal"  data-target="#insertModal" type="button" class="btn btn-primary btn-uppercase">
                <i class="ti-plus"></i></button>
            </div>
            <div class="card-body">

                <div id="myKtfaces" class="row">
                </div>

            </div>
        </div>

        <div id="myCards" class="card-columns">
        </div>

        <!-- begin::bottom -->
        <div class="card-group">
            <jsp:include page="/WEB-INF/jsps/Manager/common/bottom.jsp"/>
        </div>
        <!-- end::bottom -->

    </div>



    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog"
         aria-labelledby="updateModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updateModalTitle">更新种类</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="update" class="needs-validation" novalidate>
                        <input type="hidden" id="ktid" >
                        <div class="form-group">
                            <label for="ktnameForUpdate" class="col-form-label">种类名称:</label>
                            <input type="text" class="form-control" id="ktnameForUpdate" name="ktname" required>
                            <div class="invalid-feedback">
                            </div>
                        </div>
                    </form> <label class="col-form-label">种类封面:</label>
                    <div class="form-group">
                        <figure>
                            <img id="ktface" src="" class="card-img-top" >
                        </figure>
                        <form  action="${APP_PATH}/kindsType/ktfaceUpdate" class="dropzone">
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="cancelForUpdate" type="button" class="btn btn-secondary" data-dismiss="modal">算了...
                    </button>
                    <input id="subForUpdate" type="submit" class="btn btn-primary" onclick="return myUpdate()" value="决定了！"/>
                </div>
            </div>
        </div>
    </div>



    <div class="modal fade" id="insertModal" tabindex="-1" role="dialog"
         aria-labelledby="insertModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="insertModalTitle">添加种类</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <form id="insert" class="needs-validation" novalidate>
                        <div class="form-group">
                            <label for="ktnameForInsert" class="col-form-label">种类名称:</label>
                            <input type="text" class="form-control" id="ktnameForInsert" name="ktname" required>
                            <div class="invalid-feedback">
                            </div>
                        </div>
                    </form>
                    <label class="col-form-label">种类封面:</label>
                    <form action="${APP_PATH}/kindsType/ktfaceUpload" class="dropzone">
                    </form>
                </div>

                <div class="modal-footer">
                    <button id="cancelForInsert" type="button" class="btn btn-secondary" data-dismiss="modal">算了...
                    </button>
                    <input id="subForInsert" type="submit" class="btn btn-primary"  onclick="return myInsert()" value="决定了！"/>
                </div>

            </div>
        </div>
    </div>

</main>
<!-- end::main content -->


<!-- begin::global scripts -->
<script src="${APP_PATH}/assets/vendors/bundle.js"></script>
<!-- end::global scripts -->

<!-- begin::dropzone -->
<script src="${APP_PATH}/assets/vendors/dropzone/dropzone.js"></script>
<!-- end::dropzone -->

<!-- begin::lightbox -->
<script src="${APP_PATH}/assets/vendors/lightbox/jquery.magnific-popup.min.js"></script>
<script src="${APP_PATH}/assets/js/examples/lightbox.js"></script>
<!-- end::lightbox -->

<!-- begin::custom scripts -->
<script src="${APP_PATH}/assets/js/custom.js"></script>
<script src="${APP_PATH}/assets/js/app.js"></script>
<!-- end::custom scripts -->


</body>
</html>

<script>
    //表单验证
    var isExistForInsert = false;
    var isNullForInsert = false;
    var isExistForUpdate = false;
    var isNullForUpdate = false;
    $(function () {
        $(document).bind("contextmenu",function(e){
            return false;
        });

        $("input[name='ktname']").each(function () {
            var id = "#"+$(this).attr("id");
            $(this).on("keyup blur",function () {
                validationNull(id);
                validationExist(id);
            });
        });

    });


    function validationNull(id) {
        var isNull = false;
        var newKtname = $(id).val();
        if(newKtname ==''){
            $(".invalid-feedback").html("不取名字可不行哦~");
            $(id).removeClass("is-valid");
            $(id).addClass("is-invalid");
            isNull = true;
        }else{
            $(id).removeClass("is-invalid");
            $(id).addClass("is-valid");
            isNull = false;
        }
        if(id == "#ktnameForInsert"){
            isNullForInsert = isNull;
        }else{
            isNullForUpdate = isNull;
        }
    }

    function validationExist(id) {
        var isExist = false;
        var newKtname = $(id).val();
        var ktid = null;
        if(id == "#ktnameForUpdate"){
            var ktid = $("#ktid").val();
        }
        $.ajax({
            url: "${APP_PATH}/kindsType/validationExist",
            method: 'POST',
            data:{
                ktid : ktid,
     newKtname : newKtname,
                kid : ${requestScope.kinds.kid}
            },
            success: function (result) {
                if (result.success) {
                    $(".invalid-feedback").html("该种类已经存在了哦~");
                    $(id).removeClass("is-valid");
                    $(id).addClass("is-invalid");
                    isExist = true;
                }else {
                    isExist = false;
                }
                if(id == "#ktnameForInsert"){
                    isExistForInsert = isExist;
                }else{
                    isExistForUpdate = isExist;
                }
            }
        });
    }
</script>

<script>
    $(function () {
        createCards();
        fileMap.set(1,null);
        fileMap.set(2,null);
    });

    var fileNum = 0;
    var fileMap = new Map();
    var multiple = false;
    var myDropzone = null;

    //表单初始化
    function removeAll() {
        fileNum = 1;
        if(myDropzone!=null){
            myDropzone.removeAllFiles();
        }
        $("#update,#insert").each(function () {
            this.reset();
            $(this).removeClass();
        });
        $("input[name='ktname']").each(function () {
            $(this).removeClass("is-valid is-invalid");
        });
    }

    //获取kindsType信息
    function getKindsTypeInfo(ktid,ktname,ktface) {
        removeAll();
        $("#ktnameForUpdate").val(ktname);
        $("#ktface").attr("src",ktface);
        $("#ktid").val(ktid);
        fileNum = 2;
    }

    //跳转到furniture界面
    function toFurniture(ktid) {
        window.location.href="${APP_PATH}/toFurniture?kid=${requestScope.kinds.kid}&ktid="+ktid;
    }

    //修改KindsType
    function myUpdate() {
        var ktid = $("#ktid").val();
        var ktname = $("#ktnameForUpdate").val();
        var ktface = $(".dz-image").html();
        var flag = true;

        if(ktface==undefined){
            flag = false;
        }

        var data = {
            _method: 'PUT',
            ktid: ktid,
            ktname: ktname,
            flag: flag
        };

        validationNull("#ktnameForUpdate");
        validationExist("#ktnameForUpdate");

        if(!isNullForUpdate && !isExistForUpdate){
        $.ajax({
            url: "${APP_PATH}/kindsType/updateKindsType/"+ktid,
            method: 'POST',
            data:data,
            success: function (result) {
                if (result.success) {
                    swal("更新成功！", {
                            icon: "success"
                        }
                    );
                    createCards();
                }else{
                    swal("更新失败！", {
                            icon: "error"
                        }
                    );
                }
            },
            complete: function () {
                removeAll();
                $("#cancelForUpdate").click();
            }
        });
        }
        return false;
    }

    //添加KindsType
    function myInsert() {
        var ktface = $(".dz-image").html();
        var ktname = $("#ktnameForInsert").val();
        var flag = true;
        if(ktface==undefined){
            flag = false;
        }
        var data = {
            ktname: ktname,
            k_kid: ${requestScope.kinds.kid},
            flag: flag
        };

        validationNull("#ktnameForInsert");
        validationExist("#ktnameForInsert");

        if(!isNullForInsert && !isExistForInsert){
            $.ajax({
                url: "${APP_PATH}/kindsType/insertKindsType",
                method: 'post',
                data:data,
                success: function (result) {
                    if (result.success) {

                        swal("添加成功！", {
                                icon: "success"
                            }
                        );
                        createCards();
                    }
                },
                complete: function () {
                    $("#cancelForInsert").click();
                    removeAll();
                }
            });
        }
        return false;
    }

    //删除KindsType
    function myDelete(id) {
        var data = {
            _method: 'DELETE',
            ktid: id
        };

        swal({
            title: "确定要删除吗?",
            icon: "warning",
            buttons: ["算了", "就要"],
            dangerMode: true
        }).then((willDelete) => {
            if (willDelete) {

                $.ajax({
                    url: "${APP_PATH}/kindsType/deleteKindsType/"+id,
                    method: 'POST',
                    data:data,
                    success: function (result) {
                        if (result.success) {
                            swal("删除成功！", {
                                    icon: "success"
                                }
                            );
                            createCards();
                        }else{
                            swal("该种类中还存在商品信息，无法删除！", {
                                    icon: "error"
                                }
                            );
                        }
                    }
                });

            } else {
                swal("您取消了删除.", {
            icon: "info"
        });
    }
    });

    }

    //创建KindsType列表
    function createCards() {
        var data = {
            kid: ${requestScope.kinds.kid}
        };
        $.ajax({
            url: "${APP_PATH}/kindsType/findAllByKid",
            method: 'post',
            data:data,
            beforeSend: function () {
                var kindsTypeContent = "";
                var myKtfaces = "";
                kindsTypeContent += '<div style="margin-left: 575px;" class="spinner-grow text-info" role="status">';
                kindsTypeContent += '<span class="sr-only"></span>';
                kindsTypeContent += '</div>';
                myKtfaces += '<div style="margin-left: 570px;" class="spinner-grow text-info" role="status">';
                myKtfaces += '<span class="sr-only"></span>';
                myKtfaces += '</div>';
                $("#myCards").html(kindsTypeContent);
                $("#myKtfaces").html(myKtfaces);
            },
            success: function (result) {
                if (result.success) {
                    var kindsTypeContent = "";
                    var facesContent = "";
                    var kindsTypeList = result.data.datas;
                    if(kindsTypeList.length == 0){
                        facesContent += '<div style="margin-left:490px;"><img  src="${APP_PATH}/img/nodata.png" alt="..."></div>';
                        $("#myCards").hide();
                    }else{
                        $("#myCards").show();
                        for (var i = 0; i < kindsTypeList.length; i++) {

                            facesContent += '<div class="col-md-2 m-b-15">';
                            facesContent += '<a class="image-popup-gallery-item" href="${APP_PATH}/'+kindsTypeList[i].ktface+'">';
                            facesContent += '<img style="height: 80px" src="${APP_PATH}/'+kindsTypeList[i].ktface+'" class="img-thumbnail" alt="..."></a></div>';

                            kindsTypeContent += '<div class="card">';
                            kindsTypeContent += '<img style="height: 130px;" src="${APP_PATH}/'+kindsTypeList[i].ktface+'" class="card-img-top" alt="...">';
                            kindsTypeContent += '<div class="card-body">';
                            kindsTypeContent += '<h5 class="card-title">'+kindsTypeList[i].ktname+'</h5>';
                            kindsTypeContent += '<p class="card-text">';
                            kindsTypeContent += '<button style="margin-right: 15px;" type="button" onclick="toFurniture('+kindsTypeList[i].ktid+')" class="btn btn-primary "><i class="ti-book m-r-10"></i>查看</button>';
                            kindsTypeContent += '<button style="margin-right: 15px;" type="button" data-target="#updateModal" data-toggle="modal" onclick="getKindsTypeInfo('+kindsTypeList[i].ktid+',\''+kindsTypeList[i].ktname+'\',\''+kindsTypeList[i].ktface+'\')" class="btn btn-info "><i class="ti-settings m-r-10"></i>修改</button>';
                            kindsTypeContent += '<button type="button" onclick="myDelete('+kindsTypeList[i].ktid+')" class="btn btn-danger "><i class="ti-trash m-r-10"></i>删除</button> </p></div></div>';

                        }
                    }
                    $("#myKtfaces").html(facesContent);
                    $("#myCards").html(kindsTypeContent);
                    render();
                }else {
                    swal("无法获取版块信息", {
                        icon: "error"
                    });
                }
            }
        });
    }
</script>

